
<template>
    <el-card class="box-card">
        <template #header>
            <div class="flex justify-between">
                <span>订单统计</span>
                <div>
                    <el-check-tag :checked="current == item.value" style="margin-right: 8px"
                        v-for="(item,index) in options" :key="index" @click="handleChoose(item.value)">{{ item.text }}
                    </el-check-tag>
                </div>
            </div>
        </template>
        <div id="main" style="width: 100%;height: 300px;"></div>
    </el-card>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import * as echarts from 'echarts';
import {getStatistics3} from '~/api/index.js'
const current = ref("week")
const options = ref([{
    text: "近1个月",
    value: "month"
}, {
    text: "近1周",
    value: "week"
}, {
    text: "近24小时",
    value: "hour"
}])
const handleChoose = (val) => {
    current.value = val
    getData(val)
}
let myChart = null
onMounted(() => {
    
    myChart = echarts.init(document.getElementById('main'));
    getData(current.value)
    
})
let option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'bar'
        }]
    };
function getData(value) {
    getStatistics3(value).then(res => {
        option.xAxis.data = res.x
        option.series[0].data = res.y
        myChart.setOption(option);
    })
}
</script>
   
<style scoped>

</style>
   